<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>s</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="/css/public.css" media="all">
</head>
<body>
    <div class="layuimini-container" id="app">
        <div class="layuimini-main">
            <form class="layui-form" lay-filter="thisForm" id="thisForm">
                <div class="layui-form-item">
                    <label class=" layui-form-label">倒计时发送：</label>
                    <div class="layui-input-inline">
                        <input name="countDown" class="layui-input" id="count-down" type="text" autocomplete="off"/>
                    </div>
                    <div class="col-sm-5">
                        <span class="layui-form-mid layui-word-aux left">不用倒计时请不要填写</span>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class=" layui-form-label">发送对象：</label>
                    <div class="layui-input-block">
                        <input type="radio" name="object" value="0" title="本区所有角色" lay-filter="object" checked />
                        <input type="radio" name="object" value="1" title="指定角色" lay-filter="object"/>
                              <input type="radio" name="object" value="2" title="限定等级" lay-filter="object"/>
                        <!-- game_areas      <input type="radio" name="object" value="3" title="导入角色ID" lay-filter="object"/>-->
                          </div>
                      </div>
                      <div class="layui-form-item">
                          <label class=" layui-form-label">选择区服：</label>
                          <div class="layui-input-block">
                                  <input type="checkbox" class="area_checkbox" lay-filter="area_checkbox"
                                         name="game_area[]" v-for="(item,index) in services" :title="item.name" :data-index="index"
                                         :value="item.server_id" :checked="item.checked" />
                          </div>
                      </div>



                      <div id="box">
                          <!-- game_areas
                          <div class="layui-form-item">
                              <label class=" layui-form-label">大批量角色ID导入:</label>
                              <div >
                                  <button type="button" class="layui-btn" id="roleIdText" title="大批量角色ID.txt">
                                      <i class="layui-icon layui-icon-upload"></i> 大批量角色ID导入
                                  </button>
                              </div>
                          </div> -->
                    <div class="layui-form-item" data-object="1" style="display: none">
                        <label class=" layui-form-label">角色id:<br>多个角色以英文 , 隔开</label>
                        <div class="layui-input-inline">
                            <textarea name="roleIdsStr" class="layui-input"></textarea>
                            <button class="layui-btn layui-btn-warm layui-btn-sm" type="button" id="check-role-ids" style="margin-top:10px;">检测角色id</button>
                        </div>
                    </div>
                    <div class="layui-form-item" data-object="2" style="display: none" >
                        <label class=" layui-form-label">限制等级：</label>
                        <div class="layui-input-block clearfix">
                            <input type="number" placeholder="最小等级" class="left layui-input" style="width: 100px" name="levelMin" value="" />
                            <span class="left">&nbsp;&nbsp;~&nbsp;&nbsp;</span>
                            <input type="number" placeholder="最大等级" class="left layui-input" style="width: 100px" name="levelMax" value="" />
                        </div>
                    </div>
                          <div class="layui-form-item" data-object="2" style="display: none" >
                              <label class="layui-form-label">创角时间</label>
                              <div class="layui-input-inline">
                                  <input type="text" name="createDateTimeBegin" id="createTime0"
                                         placeholder="开始时间" autocomplete="off" class="layui-input" />
                                  <input type="text" name="createDateTimeEnd" id="createTime1"
                                         placeholder="截止时间" autocomplete="off" class="layui-input" />
                              </div>
                          </div>
                          <div class="layui-form-item" data-object="2" style="display: none" >
                              <label class=" layui-form-label">充值金额：</label>
                              <div class="layui-input-block clearfix">
                                  <input type="number" placeholder="最小充值金额" class="left layui-input" style="width: 100px" name="moneyMin" value="" />
                                  <span class="left">&nbsp;&nbsp;~&nbsp;&nbsp;</span>
                                  <input type="number" placeholder="最大充值金额" class="left layui-input" style="width: 100px" name="moneyMax" value="" />
                              </div>
                          </div>

                </div>

                <div class="layui-form-item">
                    <label class=" layui-form-label">邮件标题：</label>
                    <div class="layui-input-inline">
                        <input type="txt" name="title" class="layui-input" lay-verify="required"/>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class=" layui-form-label">邮件描述：</label>
                    <div class="layui-input-inline" style="width: 500px;">
                        <textarea name="content" style="height:150px;" class="layui-input" lay-verify="required"></textarea>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class=" layui-form-label">发送物品：</label>
                    <div class="layui-input-inline" style="width: 100%; padding-left: 300px;">
                        <div class="clearfix">
                            <div class="left">
                                <textarea v-model="itemText" name="itemText"  v-on:change="itemTextBlur" class="layui-input" style="width:250px;height:150px;"></textarea>
                            </div>
                            <div class="left" style="padding-left: 20px">
                                <table class="layui-table" style="width: 560px;">
                                    <colgroup>
                                        <col width="150">
                                        <col width="150">
                                        <col>
                                    </colgroup>
                                    <thead>
                                    <tr>
                                        <th>物品ID</th>
                                        <th>物品数量</th>
                                        <th>物品名称</th>
                                        <th>是否绑定</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr v-for="row in itemList">
                                        <td>{{row.id}}</td>
                                        <td>{{row.number}}</td>
                                        <td>{{row.itemName}}</td>
                                        <td>{{row.isBind==1?'是':'否'}}</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="left" style="padding-left: 20px;">
                            <span class="layui-form-mid layui-word-aux left">
                                输入格式例子:
                                <div style="border:1px solid #e0e0e0;padding:5px;">
                                    <p>10001:1:1</p>
                                </div>
                                表示 物品ID为 1011001 的物品 发放 1个<br>
                                表示 物品ID为 1011002 的物品 发放 2个<br>
                            </span>
                            </div>
                            <div class="left" style="padding-left: 60px;">
                                <div class="layui-form-item">
                                    <label >物品生成:</label>
                                    <div class="layui-input-block">
                                        <table id="table1">
                                            <tbody>
                                            <tr>
                                                <td>道具ID:</td>
                                                <td><input type="number" class="layui-input" :value="equip.id" required="required" placeholder="道具ID" v-on:change="equipIdChange(event)"/></td>
                                                <td>道具名:</td>
                                                <td><input type="text" class="layui-input layui-disabled" :value="equip.name" placeholder="" style="color: black !important;" readonly/></td>
                                                <td>绑定:</td>
                                                <td>
                                                    <input type="radio" name="equip_bind" value="1" title="是" lay-filter="equip_bind" />
                                                    <input type="radio" name="equip_bind" value="0" title="否" lay-filter="equip_bind" checked=""/>
                                                </td>
                                                <td>
                                                    <select class="layui-select" lay-search="" lay-ignore="" lay-filter="equipSelectChange">
                                                        <option value="">选择道具</option>
                                                        <option :value="row.id" v-for="row in equipList">{{row.name}}</option>
                                                    </select>
                                                </td>
                                            </tr>
                                            <tr>
                                             <td>数量:</td>
                                                <td><input type="number" min="1" max="14" class="layui-input" placeholder="1~14" v-model="equip.sendNum"/></td>
                                                <td></td>
                                            </tr>
                                            </tbody>
                                        </table>

                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label"></label>
                                    <div class="layui-input-inline clearfix">
                                        <button type="button" class="layui-btn layui-btn-warm layui-btn-sm left" v-on:click="commitItem()">生成</button>
                                        <button type="button" class="layui-btn layui-btn-warm layui-btn-sm left" v-on:click="commitItemClear()">清除</button>

                                    </div>
                                </div>
                            </div>

                            </div>
                    </div>
                </div>

                <div class="layui-form-item">
                        <label class=" layui-form-label">发送游戏币：</label>
                        <div class="layui-input-inline" style="width: 100%; padding-left: 300px;">
                            <div class="clearfix">
                                <div class="left">
                                    <textarea name="coinText" v-on:blur="coinTextBlur" class="layui-input" style="width:250px;height:150px;"></textarea>
                                </div>
                                <div class="left" style="padding-left: 20px">
                                    <table class="layui-table" style="width: 560px;">
                                        <colgroup>
                                            <col width="150">
                                            <col width="150">
                                            <col>
                                        </colgroup>
                                        <thead>
                                        <tr>
                                            <th>游戏币类型</th>
                                            <th>数量</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr v-for="row in coinList">
                                            <td>{{row.typeName}}</td>
                                            <td>{{row.number}}</td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="left" style="padding-left: 20px;">
                                <span class="layui-form-mid layui-word-aux left">
                                    输入格式例子:
                                    <div style="border:1px solid #e0e0e0;padding:5px;">
                                        <p>10:10  金币10个</p>
                                        <p>11:10  金券10个</p>
                                        <p>20:10  银币10个</p>
                                        <p>21:10  铜币10个</p>
                                        <p>50:10  功勋10个</p>
                                    </div>
                                    <p>表示:金币 10 个</p>
                                    <p>表示:金券 10 个</p>
                                    <p>表示:银币 10 个</p>
                                    <p>表示:铜币 10 个</p>
                                    <p>表示:武勋 10 个</p>

                                </span>
                                </div>
                            </div>
                        </div>
                    </div>

                <div class="layui-form-item">
                    <label class="layui-form-label"></label>
                    <div class="layui-input-inline clearfix">
                        <button type="button" class="layui-btn layui-btn-normal layui-btn-sm left" lay-submit="" lay-filter="submit" id="submit">
                            保存记录
                        </button>
                        <span class="layui-form-mid layui-word-aux left">&nbsp;&nbsp;保存记录待审核</span>
                    </div>
                </div>
            </form>
        </div>
    </div>
</body>
</html>
<script src="/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="/js/common.js?v=5" charset="utf-8"></script>
<script>
    var coinTypes = [{"key":10,"value":"金币"},{"key":11,"value":"金券"},{"key":20,"value":"银币"},{"key":21,"value":"铜币"},{"key":50,"value":"武勋"}];
    var serviceList = JSON.parse(localStorage.getItem('services'));
    var services = [];
    for(var k in serviceList){
        if(serviceList[k].can_push==1) {
            services.push(serviceList[k])
        }
    }
    layui.use(['laydate','form','laytpl','upload'], function () {
        var laydate = layui.laydate,form = layui.form,upload = layui.upload,$ = layui.$,laytpl=layui.laytpl;

        laydate.render({
            elem: '#count-down',
            type: 'datetime',
            trigger: 'click'
        });



        form.on('radio(object)', function(data){
            $('#box').children(".layui-form-item").hide();
            $('#box').children('[data-object="'+data.value+'"]').show();
        });

        upload.render({
            elem: '#roleIdText',
            exts:"txt",
            accept: 'file', // 只接受文件
            url:"/admin/package/import",
            done:function(res){
                if (res.code !==0 ){
                    layer.msg(res.msg,{icon:2})
                } else {
                    layer.msg('导入成功',{icon:1})
                }
            }
        });

        var loading1,loading2;
        new Vue({
            el:"#app",
            data:{
                itemList:[],
                coinList:[],
                equipList:getEnum('equip'),
                services:services,
                coinTypes:coinTypes,
                itemText:'',
                itemTexts:'',
                itemArr:[],//发送的物品
                coinArr:[],//发送的金币
                equip:{ //单个物品
                    id:null,
                    name:"",
                    bind:0,
                    level:0,
                    holeNum:0,
                    sendNum:1,
                    attribute:[], //属性 {Type:'',Value:''}
                    ore:[], //矿石 {Type:'',Value:''}
                    gem:[], //宝石 {id,Type,name},
                    soulAttr:null,//魂魄魂晶属性
                    petAttr:null,//精灵球属性
                    fsbAttr:null,//仙魂珠属性
                },
            },
            methods:{



                getEquipNameById:function(id){
                    for(var k in this.equipList){
                        var v = this.equipList[k];
                        if (v.id == id){
                            return v.name;
                        }
                    }
                    return '无此道具';
                },
                commitItem:function () {
                    var _this = this;
                    var num=  parseInt(_this.equip.sendNum)
                    var equipid=_this.equip.id
                    var bind=_this.equip.bind
                    if (!_this.equip.id) {
                        layer.msg('请选择道具',{icon:2});return;
                    }
                    console.log('当前输入的数量',_this.equip.sendNum)
                    var itemTextValue = `${equipid}:${num}:${bind}`;
                    console.log('准备赋值的数据',itemTextValue)
                    // 判断 itemText 是否为空
                    if (_this.itemText.trim() === '') {
                        _this.itemText = itemTextValue; // 如果为空，直接赋值
                    } else {
                        _this.itemText += '\n' + itemTextValue; // 否则换行追加
                    }
                    _this.itemTextBlur(); // 手动调用 itemTextBlur()

                },
                commitItemClear:function(){
                    var _this = this;

                    _this.itemText="";
                    _this.itemTextBlur(); // 手动调用 itemTextBlur()

                },
                itemTextBlur:function(e){
                    var _this = this;
                    var value = this.itemText;
                    loading1 = layer.load();
                    $.get("/admin/package/checkSendItemFormat",{value:value},function(res){
                        layer.close(loading1)
                        if (res.code === 0) {
                            var newText = res.data.newText;
                            var results = res.data.results;
                            _this.itemText = newText;
                            _this.itemList = results;
                        } else {
                            _this.itemList = "";
                            _this.itemText ="";
                            layer.msg(res.msg,{icon:5})
                        }
                    })
                },
                coinTextBlur:function(e){
                    var _this = this;
                    var value = e.target.value;
                    var returns = [];
                    var coinTypeIds = [];
                    for(var k in coinTypes) coinTypeIds.push(coinTypes[k].key);
                    var getTypeName = function(coinType){
                        for(var k in coinTypes) {
                            if (coinTypes[k].key == coinType){
                                return coinTypes[k].value;
                            }
                        }
                        return null;
                    }

                    try{
                        var arr = value.split("\n");
                        for(var i in arr){
                            var type = parseInt(arr[i].split(":")[0]);
                            var number = parseInt(arr[i].split(":")[1]);
                            if (coinTypeIds.indexOf(type) !=-1) {
                                returns.push({
                                    type:type,
                                    typeName:getTypeName(type),
                                    number:number
                                })
                            }
                        }
                        var newText = "";
                        for(var k in returns){
                            var row = returns[k];
                            newText += "\n" + row.type +":" + row.number;
                        }
                        newText = newText.substr(1);
                        e.target.value = newText;
                        _this.coinList = returns;

                    }catch(e) {
                        layer.msg("格式错误",{icon:5})
                    }
                },
                getGameAreas:function(){
                    var gameAreas = [];
                    var array = $('#thisForm').serializeArray();
                    for (var k in array){
                        var v = array[k]
                        if (v.name == "game_area[]"){
                            gameAreas.push(parseInt(v.value))
                        }
                    }
                    return gameAreas;
                }
            },
            mounted:function(){
                var _this = this;


                laydate.render({
                    elem: '#createTime0',
                    type:'datetime',
                    value: getYmd(0)+ " 00:00:00"
                });
                laydate.render({
                    elem: '#createTime1',
                    type:'datetime',
                    value: getYmd(1) + " 00:00:00"
                });

                $('[lay-ignore]').removeAttr('lay-ignore')
                form.render();

                $('[lay-ignore]').removeAttr('lay-ignore');
                form.on('select(equipSelectChange)',function(data){
                    var selectId = parseInt(data.value);
                    _this.equip.id = selectId;
                    _this.equip.name = _this.getEquipNameById(selectId);
                })
                form.on('radio(equip_bind)',function(data){
                    _this.equip.bind = data.value;
                })
                $('body').on('click','#check-role-ids',function(){
                    var roleIdsStr = $('[name=roleIdsStr]').val();
                    if (!roleIdsStr) return;
                    var gameAreas = _this.getGameAreas();
                    if (gameAreas.length ===0) {
                        layer.msg("请选择区服",{icon:5})
                        return;
                    }
                    $.get("/admin/gameRole/checkRoleExists",{roleIdsStr:roleIdsStr,gameArea:gameAreas[0]},function(res){
                        var notExistsIds = res.data.notExistsIds;
                        if (notExistsIds.length === 0){
                            layer.msg('全部检测成功',{icon:1})
                        } else {
                            layer.open({
                                title:"角色ID不存在:",
                                type:1,
                                shadeClose:true,
                                area:["500px","250px"],
                                content:"<div id='not-exists-ids'>"+notExistsIds.join(",")+"</div>",
                            })
                        }
                    })
                });

                form.on('submit(submit)', function(data){
                    var _this = this;

                    var formData = data.field;

                    var gameAreas = [];
                    for(var k in formData){
                        var v = formData[k]
                        if (k.indexOf('game_area[') !==-1 ){
                            gameAreas.push(v)
                        }
                    }
                    formData.gameAreas = gameAreas
                    $('#submit').attr('disabled',true);
                    $.post("/admin/package/add",formData,function(res){
                        $('#submit').removeAttr('disabled');
                        if (res.code === 0){
                            layer.msg('操作成功',{icon:1,time:500},function(){
                                parent.location.reload();
                            })
                        }else {
                            layer.msg(res.msg,{icon:5})
                        }
                    })
                    return false;
                });

            }
        })



    });
</script>
<style>
    #not-exists-ids{
        padding:20px;
    }
    .layui-table{
        margin:0;
    }
    .layui-form-label{
        width:270px;
    }
</style>